{extend name="public/base" /}
{block name="title"}文章管理{/block}
{block name="css"}
<link href="__PUBLIC__/static/inspinia/css/plugins/datapicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
<link href="__PUBLIC__/static/inspinia/css/plugins/dropzone/dropzone-4.3.0.min.css" rel="stylesheet">
<link href="__PUBLIC__/static/inspinia/css/plugins/chosen/chosen.css" rel="stylesheet">
<link href="__PUBLIC__/static/common/css/plugins/jquery.tagsinput.min.css" rel="stylesheet">
{/block}
{block name="main"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>{$article ? '修改' : '新增'}文章</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content">

            <div class="tabs-container">
                <form class="form-horizontal ajax-form" action="{:url(request()->controller().'/'.request()->action())}" method="post">

                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#tab-base">文章内容</a></li>
                        <li><a data-toggle="tab" href="#tab-advance">高级属性</a></li>

                        <li class="pull-right">
                            {present name="article"}
                            <input type="hidden" name="id" value="{$article.id}">
                            <input type="hidden" name="oldCategoryIds" value="{$oldCategoryIds|json_encode}">
                            {/present}

                            <button class="btn btn-white btn-save" type="submit"><i class="fa fa-plus"></i> {$article ? '保 存' : '保存为草稿'}</button>
                            <button class="btn btn-primary btn-post" type="submit"><i class="fa fa-plus-circle"></i> {$article ? '发 布' : '立即发布'}</button>
                        </li>
                    </ul>

                    <div class="tab-content">

                        <div id="tab-base" class="tab-pane active">
                            <div class="panel-body">
                                {include file="article/addArticleBase"}
                            </div>
                        </div>

                        <div id="tab-advance" class="tab-pane">
                            <div class="panel-body">
                               {include file="article/addArticleAdvance"}
                            </div>
                        </div>

                    </div>

                    <div class="row m-t-md">
                        <div class="col-lg-12 text-right">
                            <button class="btn btn-white btn-save" type="submit"><i class="fa fa-plus"></i> {$article ? '保 存' : '保存为草稿'}</button>
                            <button class="btn btn-primary btn-post" type="submit"><i class="fa fa-plus-circle"></i> {$article ? '发 布' : '立即发布'}</button>
                        </div>
                    </div>

                </form>

            </div>


        </div>
    </div>
</div>

{/block}

{block name="js"}
<!-- 日期 -->
<script src="__PUBLIC__/static/inspinia/js/plugins/datapicker/bootstrap-datetimepicker.min.js"></script>
<script src="__PUBLIC__/static/inspinia/js/plugins/datapicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<!-- 上传插件 -->
<script src="__PUBLIC__/static/inspinia/js/plugins/dropzone/dropzone-4.3.0.min.js"></script>

<!-- Chosen -->
<script src="__PUBLIC__/static/inspinia/js/plugins/chosen/chosen.jquery.js"></script>
<!-- tags input -->
<script src="__PUBLIC__/static/common/js/plugins/jquery.tagsinput.min.js"></script>

<!-- 引入ueditor的js代码 -->
<script src="__PUBLIC__/static/ueditor/ueditor.config.js?2017032702"></script>
<script src="__PUBLIC__/static/ueditor/ueditor.all.js?2017041701"></script>
<script>
    //ueditor代码
    var url="{:url('BaiduUeditor/index')}";
    var ue = UE.getEditor('container',{
      serverUrl :url,
      UEDITOR_HOME_URL:'__PUBLIC__/static/ueditor/',
      initialFrameHeight :600,
      autoHeightEnabled : true,
      maximumWords : 200000,
    });

    let config = {
        '.chosen-select'           : {},
        '.chosen-select-deselect'  : {allow_single_deselect:true},
        '.chosen-select-search'    : {search_contains:true},
        '.chosen-select-no-single' : {disable_search_threshold:10},
        '.chosen-select-no-results': {no_results_text:'没有匹配的选项'},
        '.chosen-select-width'     : {width:"100%!important"}
    };
    for (let selector in config) {
        $(selector).chosen(config[selector]);
    }

    $('button.btn-save').click(function() {
        //$('input[name=status]').val("{:\\app\\common\\model\\ArticleModel::STATUS_DRAFT}");
    });
    $('button.btn-post').click(function() {
        $('input[name=status]').val("{:\\app\\common\\model\\ArticleModel::STATUS_PUBLISHED}");
    });

    $('#tags').tagsInput({
        'height': '48px',
        'width': '100%',
        'interactive': true,
        'defaultText': '添加标签',
        'delimiter': [','],
    });

    //日期选择
    $('.form-datetime').datetimepicker({
        locale: 'zh-cn',
        viewMode: 'days',
        format: 'YYYY-MM-DD HH:mm:ss',
    });

    //图片上传
    Dropzone.autoDiscover = false;
    $("#uploadThumbImage").dropzone({
        url: "{:url('Image/upcrop')}",
        paramName: 'file', //input的name
        maxFilesize: 5, // MB
        addRemoveLinks: true, //添加删除链接
        clickable: true, //预览图可点击
        maxFiles: 1, //最多上传文件数量
        acceptedFiles: '.jpg,.gif,.png,.jpeg', //允许上传的文件后缀
        // thumbnailWidth: 320,
        // thumbnailHeight: 200,
        dictCancelUpload: '取消上传',
        dictRemoveFile: '删除图片',
        maxfilesexceeded: function(file) {
            layer.alert('超最大数量,请删除现有文件后再上传', {icon: 2, title: '错误'});
            file.previewElement.remove();
        },
        sending: function(file,xhr,formData) {
            var $element = $(this.element);
            //图片尺寸
            formData.append("width", $element.data('width'));
            formData.append("height", $element.data('height'));
            //缩略图尺寸
            formData.append("thumbWidth", $element.data('thumbWidth'));
            formData.append("thumbHeight", $element.data('thumbHeight'));
        },
        success: function(file,response) {
            var $element = $(this.element);
            var thumbWidth = $element.data('thumbWidth');
            var thumbHeight = $element.data('thumbHeight');
            if (response.code) {
                //将图片id填入input
                var imageId = response.data.id;
                var imageUrl = ""+response.data.image_url;
                $('#' + $element.data('inputName')).val(imageId);
                var displayHtml = '<img src="'+imageUrl+'" style="border:1px solid #ccc;width:_thumbWidth_px;height:_thumbHeight_px;max-width:100%">';
                displayHtml = displayHtml.replace('_thumbWidth_', thumbWidth);
                displayHtml = displayHtml.replace('_thumbHeight_', thumbHeight);
                $element.find('.dz-message').html('').append(displayHtml);

                //判断是否进行裁剪
                if (response.msg == 'image_need_crop') {
                    var cropUrl = "{:url('admin/Image/upcrop')}";
                    layer.open({
                        type: 2,
                        title: '图片裁剪窗口',
                        shadeClose: true,
                        shade: false,
                        maxmin: true, //开启最大化最小化按钮
                        area: ['1172px', '650px'],
                        content: cropUrl + "?imageId=" + imageId + "&thumbWidth=" + $element.data('width') + "&thumbHeight=" + $element.data('height')
                    });
                }
            } else {
                layer.alert(response.msg, {icon: 2, title: '上传失败'});
            }
        },
        complete: function(file) {
            if (this.options.maxFiles == 1) {
                this.removeFile(file);
            }
        },
        error: function(file, message) {
            //上传错误
            layer.alert(message, {icon: 2, title: '上传失败'});
            //file.previewElement.remove();
            this.removeFile(file);
        }
    });

    //设定upcropper的函数，变量名固定不变
    var upcropper = {
        successCallback: function (res) {
            var url = res.data.image_url;
            $(".dz-message > img").attr("src", url);

            setTimeout(function () {
                layer.closeAll();
            }, 2000);
        }
    };
</script>
{/block}